import React, {useState} from 'react'
import {
    Dimensions,
    PixelRatio,
    StyleSheet,
    Text,
    View
} from 'react-native'
import AntDesign from 'react-native-vector-icons/AntDesign'
import theme from '../../config/theme'

const historyList = [
    'splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目',
    '当UI设计图上标注某间距为1px时，只需在间距设置的地方填如下值：当UI设计图上标注某间距为1px时，只需在间距设置的地方填如下值：',
    '可以是已有项目，或者是使用 create-react-native-app 新创建的空项目，你也可以从 官方示例 脚手架里拷贝并修改',
    'yarn add @ant-design/react-native',
    '链接字体图标',
    'UI 样式高度可配置，拓展性更强，轻松适应各类产品风格',
    '基于 React Native 的 iOS / Android / Web 多平台支持，组件丰富、能全面覆盖各类场景 (antd-mobile)',
    '提供 "组件按需加载" / "Web 页面高清显示" / "SVG Icon" 等优化方案，一体式开发',
    '使用 TypeScript 开发，提供类型定义文件，支持类型及属性智能提示，方便业务开发',
    '全面兼容 react',
    '适合于中大型产品应用',
    '适合于基于 react-native 的多终端应用',
    '适合不同 UI 风格的高度定制需求的应用',
    'Ant Design Mobile RN of React'
]

function History() {
    const [getHistory, setHistory] = useState(limit6())
    const empty = (Array.isArray(getHistory) && getHistory.length > 0) ?
        <Text style={styles.handleClear} onPress={() => setHistory([])}>清空搜索记录</Text> : null

    function limit6() {
        return historyList.length > 6 ? historyList.splice(historyList.length - 6, 6) : historyList
    }

    function remove(key: number) {
        setHistory(getHistory.filter(((item, index) => index !== key)))
    }

    return (
        <View>
            {
                getHistory.map((item, index) => {
                    return (
                        <View key={index} style={[styles.historyItem, index === 0 ? styles.firstItem : null]}>
                            <AntDesign name="clockcircleo" color={theme.shallowGrey} size={18}/>
                            <Text numberOfLines={1}
                                  style={styles.text}>{item}</Text>
                            <AntDesign name="close" color={theme.shallowGrey} size={20}
                                       onPress={() => remove(index)}/>
                        </View>
                    )
                })
            }
            {empty}
        </View>
    )
}

const {width} = Dimensions.get('window')
const styles = StyleSheet.create({
    container: {},
    historyItem: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        paddingVertical: 15,
        paddingHorizontal: 10,
        borderColor: theme.shallowGrey,
        borderBottomWidth: 1 / PixelRatio.get(),
        borderStyle: "solid"
    },
    firstItem: {
        borderTopWidth: 1 / PixelRatio.get()
    },
    text: {
        width: width - 18 - 20 - 20,
        paddingHorizontal: 10,
        color: theme.mainFontColor
    },
    handleClear: {
        paddingVertical: 10,
        textAlign:"center",
        fontSize: 14,
        color: theme.dangerColor,
    }
})

export default History
